<template>
  <div class="box" ref="lineCardRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";

const lineCardRef = ref();

const getOption = () => {
  return {
    xAxis: {
      show: false,
      type: "category",
      boundaryGap: false,
      data: props.orderTrendAxis
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        type: "line",
        data: props.orderTrend,
        smooth: true,
        itemStyle: {
          opacity: 0,
        },
        lineStyle: {
          color: "blue",
          type: "solid",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "blue", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "pink", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0,
      show: true,
      backgroundColor: {
        type: "liner",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "yellow", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "skyblue", // 100% 处的颜色
          },
        ],
        global: false,
      },
    },
    tooltip: {
      show: true,
      confine: true,
      trigger: "axis",
    },
  };
};

let myChart: any;

const props = defineProps(["orderTrend", "orderTrendAxis"]);

watch(
  () => props.orderTrend,
  () => {
    myChart.setOption(getOption());
  }
);

onMounted(() => {
  myChart = echarts.init(lineCardRef.value);

  myChart.setOption(getOption());

  window.addEventListener("resize", function () {
    myChart.resize();
  });
});
</script>

<style>
.box {
  width: 100%;
  height: 100%;
}
</style>
